<template>
  <div id="GameList">
    <h1 class="mt-6 lg:mt-10 lg:mb-8 mb-6 font-bold text-xl lg:text-2xl text-white uppercase font-mono">
      {{ $mt('Game Galaxy') }}
    </h1>
    <div class="grid px-2 lg:px-0 grid-cols-2 lg:grid-cols-6 gap-x-8 lg:gap-x-10 gap-y-8 lg:gap-y-6">
      <div v-for="(item, index) in introduceList" :key="item.id">
        <IntroduceItem :isShowBg="true" :dataInfo="item" />
      </div>
    </div>
    <footer class="flex justify-end mt-10">
      <van-pagination
        :total-items="totalItems"
        :items-per-page="48"
        class="w-full lg:w-[200px]"
        :model-value="curPage"
        mode="simple">
        <template #prev-text>
          <nuxt-link
            class="w-full h-full flex items-center justify-center"
            :class="{ 'pointer-events-none': curPage === 1 }"
            external
            :href="$localePath(`/game/list/${Math.max(1, curPage - 1)}`)">
            <van-icon name="arrow-left" />
          </nuxt-link>
        </template>
        <template #next-text>
          <nuxt-link
            external
            class="w-full h-full flex items-center justify-center"
            :class="{ 'pointer-events-none': totalPages === curPage }"
            :href="$localePath(`/game/list/${Math.min(totalPages, curPage + 1)}`)">
            <van-icon name="arrow" />
          </nuxt-link>
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </footer>
  </div>
</template>
<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'
import { useCategoryStore } from '~/store/category'
import YImage from '~/components/logic/YImage.vue'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
import { useGoodsCategorySeo } from '~/composables/useTdk'
import { useIntroduceStore } from '~/store/introduce'

const route = useRoute()
let { curPage = 1 } = route.params as any
curPage = +curPage
const totalItems = ref(0)
const totalPages = computed(() => Math.ceil(totalItems.value / 48))
const introduceStore = useIntroduceStore()
// 服务端渲染的数据
const { data } = await useLazyAsyncData(async () => {
  const { totalElements } = await introduceStore.initIntroduceList(curPage, 48)
  return { totalElements }
})
totalItems.value = data.value.totalElements
const { introduceList } = storeToRefs(introduceStore)

const { $mt } = useCommonPlugin()
const seoTitle = `BitTopup - ${$mt('Gift Card Selection for Every Occasion')}${route.params.curPage ? ` - Page ${curPage} of ${totalPages.value}` : ''}`
const seoDescription =
  $mt(
    'Top up your favorite games, live streaming platforms, and gift cards effortlessly on our website! Enjoy instant delivery, secure payments, and exclusive deals for a seamless recharge experience.',
  ) + ` Page ${curPage} of ${totalPages.value}`
useSeoMeta({
  title: seoTitle,
  ogTitle: seoTitle,
  description: seoDescription,
  ogDescription: seoDescription,
  ogImage: 'https://bittopup.com/logo.png',
  twitterCard: 'summary_large_image',
})
</script>
<style lang="scss" scoped>
#GameList {
}
</style>
